<template>
    <view style="height: 100%">
        <!-- <custom-nav title="付费会员" custom-style="background:#222426;">
            <view slot="nav-bg" class="nav__bg" :style="'height: ' + navHeight + 'px;'">
                <image class="img" mode="widthFix" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/nav-bg.png"></image>
            </view>
        </custom-nav> -->
        <!-- <image class="img" mode='widthFix' src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/nav-bg.png"></image> -->

        <view class="member">
            <view class="member__head">
                
                <image class="member__head_bg" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/pay-bg.png"></image>
				<image class="member__head_icon" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/Image-1.png"></image>
                <view class="head-body">
				<view class="head-top flex-row-start">
                    <image class="head-top__avatar" :src="marketingAllMemberInfo.plUserAvatar"></image>
                    <view class="heda-top__body">
                        <view class="body-top flex-row-start">
                            <view class="body-title">{{ marketingAllMemberInfo.plUserName }}</view>
                            <view class="body-icon">
                                <image class="icon" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/v-icon.png"></image>
                                <!-- <view class="text" wx:if="{{pmLevelStatus}}">{{'LV'+marketingAllMemberInfo.userPmLevel}}</view> -->
                                <view class="text" v-if="pmLevelStatus">{{ marketingAllMemberInfo.userPmLevelName }}</view>
                                <view class="text" v-else>未开通</view>
                            </view>
                        </view>
                        <view class="body-desc" v-if="pmLevelStatus">
                            到期时间：{{ marketingAllMemberInfo.pmLevelInvalidTime == -1 ? '永久' : marketingAllMemberInfo.pmLevelInvalidTime }}
                        </view>
                    </view>
                </view>

                <view class="head-bottom">
                    <!-- 判断是否开通会员 -->
                    <block v-if="pmLevelStatus">
                        <!-- 判断是否快要过期 -->
                        <block v-if="type != 1">
                            <view class="head-bottom__tips">同级续费将自动延长有效期升级购买将立即生效</view>
                        </block>
                        <block v-else>
                            <view class="head-bottom__btn" @tap="toPayPage1">
								
                                
                                <image class="btn-bg" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/btn.png"></image>
								<view class="head-bottom__btn__text flex-row-center">立即续费</view>
                            </view>
                            <view class="head-bottom__container flex-row-between">
                                <view class="container-left">
                                    <text>累积优惠：</text>
                                    <text class="left-price">{{ leiji.amount || 0 }}</text>
                                    <text>（元）</text>
                                </view>
                                <view class="container-right flex-row-start" @tap="toPurchaseHistory">
                                    <view>购买记录</view>
                                    <view class="arrows_r"></view>
                                </view>
                            </view>
                        </block>
                    </block>
                    <block v-else>
                        <view class="head-bottom__tips">同级续费将自动延长有效期升级购买将立即生效</view>
                    </block>
                </view>
				</view>
			</view>

            <!-- 后台配置的付费会员列表 -->
            <scroll-view :scroll-with-animation="true" :scroll-into-view="'scroll' + current" :scroll-x="true" class="member__cards" v-if="type != 1">
                <view
                    :id="'scroll' + index"
                    :class="'member__cards__item ' + (index == current && 'on')"
                    :data-index="index"
                    @tap="swidthMemberDetaile"
                    v-for="(item, index) in payleMemberRuleList"
                    :key="item.id"
                >
                    <view class="member__cards__item_title flex-row-center">{{ item.payLevelName }}</view>

                    <view class="member__cards__item_container flex-column-start">
                        <view class="item-num" v-if="item.payLevelDuration == -1">永久</view>
                        <view class="item-num" v-else>{{ item.payLevelDuration }}个月</view>
                        <view class="item-price">
                            <text>￥</text>
                            {{ item.payLevelPrice }}
                        </view>
                        <view class="item-btn flex-row-center" v-if="item.payLevelDuration != -1">约￥{{ item.meanPrice }}/月</view>
                    </view>
                </view>
            </scroll-view>

            <!-- 后台配置的根据列表展示特权 -->
            <view class="member__box" v-if="type != 1">
                <view class="member__box_head flex-row-center">
                    <view class="head-lbg"></view>
                    <view class="head-title">LV{{ payleMemberDetail.payLevelId }}特权</view>
                    <view class="head-rbg"></view>
                </view>

                <view class="member__box_privilege flex-row-start flex_wrap">
                    <view class="privilege-item flex-column-start" v-if="payleMemberDetail.rewardIntegral">
                        <image class="privilege-item__bg" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/integral-bg.png"></image>
                        <view class="privilege-item__price">{{ payleMemberDetail.rewardIntegral }}分/{{ payleMemberDetail.payLevelType == 1 ? '月' : '周' }}</view>
                        <view class="privilege-item__title">积分</view>
                    </view>
                    <view class="privilege-item flex-column-start" v-if="payleMemberDetail.rewardAmount">
                        <image class="privilege-item__bg" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/integral-bg.png"></image>
                        <view class="privilege-item__price">{{ payleMemberDetail.rewardAmount }}元/{{ payleMemberDetail.payLevelType == 1 ? '月' : '周' }}</view>
                        <view class="privilege-item__title">奖励金</view>
                    </view>
                    <view class="privilege-item flex-column-start" v-if="payleMemberDetail.serveFreeTimes">
                        <image class="privilege-item__bg" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/integral-bg.png"></image>
                        <view class="privilege-item__price">{{ payleMemberDetail.serveFreeTimes }}次/{{ payleMemberDetail.payLevelType == 1 ? '月' : '周' }}</view>
                        <view class="privilege-item__title">免服务费次数</view>
                    </view>
                    <view class="privilege-item flex-column-start" v-if="payleMemberDetail.payLevelServeDiscount">
                        <image class="privilege-item__bg" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/integral-bg.png"></image>
                        <view class="privilege-item__price">{{ payleMemberDetail.payLevelServeDiscountText }}折</view>
                        <view class="privilege-item__title">服务费优惠</view>
                    </view>
                </view>

                <view class="member__box_discounts" v-if="payleMemberDetail.marketCouponOptionApplies && payleMemberDetail.marketCouponOptionApplies.length">
                    <view class="discounts-head flex-row-center">
                        <view class="discounts-head__title">{{ payleMemberDetail.allCouponLength }}张优惠券，价值{{ payleMemberDetail.allPrice }}元</view>
                    </view>

                    <view class="discounts-container flex-row-start flex_wrap">
                        <block v-for="(item_wrap, index) in payleMemberDetail.marketCouponOptionApplies" :key="index">
                            <view class="container-item flex-column-start" v-for="(item, index1) in item_wrap.totalReceiveCount" :key="index1">
                                <image class="container-item__bg" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/Coupons-bg.png"></image>

                                <view class="container-item__title" v-if="item_wrap.couponType == 1">服务费券</view>

                                <view class="container-item__title" v-if="item_wrap.couponType == 2">电费券</view>

                                <view class="container-item__title" v-if="item_wrap.couponType == 3">现金券</view>

                                <view class="container-item__price">
                                    <text>￥</text>
                                    {{ item_wrap.amount }}
                                </view>

                                <view class="container-item__desc flex-row-center">满{{ item_wrap.couponAmount }}可用</view>
                            </view>
                        </block>
                    </view>
                </view>
            </view>
            <!-- 展示当前会员权益 -->
            <view class="member__box" v-else>
                <view class="member__box_head flex-row-center">
                    <view class="head-lbg"></view>
                    <view class="head-title">LV{{ currentPayleOrder.arLevel }}特权</view>
                    <view class="head-rbg"></view>
                </view>

                <view class="member__box_privilege flex-row-start flex_wrap">
                    <view class="privilege-item flex-column-start" v-if="currentPayleOrder.rewardIntegral">
                        <image class="privilege-item__bg" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/integral-bg.png"></image>
                        <view class="privilege-item__price">{{ currentPayleOrder.rewardIntegral }}分/{{ currentPayleOrder.payLevelType == 1 ? '月' : '周' }}</view>
                        <view class="privilege-item__title">积分</view>
                    </view>
                    <view class="privilege-item flex-column-start" v-if="currentPayleOrder.rewardAmount">
                        <image class="privilege-item__bg" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/integral-bg.png"></image>
                        <view class="privilege-item__price">{{ currentPayleOrder.rewardAmount }}元/{{ currentPayleOrder.payLevelType == 1 ? '月' : '周' }}</view>
                        <view class="privilege-item__title">奖励金</view>
                    </view>
                    <view class="privilege-item flex-column-start" v-if="currentPayleOrder.serveFreeTimes">
                        <image class="privilege-item__bg" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/integral-bg.png"></image>
                        <view class="privilege-item__price">{{ currentPayleOrder.serveFreeTimes }}次/{{ currentPayleOrder.payLevelType == 1 ? '月' : '周' }}</view>
                        <view class="privilege-item__title">免服务费次数</view>
                    </view>
                    <view class="privilege-item flex-column-start" v-if="currentPayleOrder.payLevelServeDiscount">
                        <image class="privilege-item__bg" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/integral-bg.png"></image>
                        <view class="privilege-item__price">{{ currentPayleOrder.payLevelServeDiscountText }}折</view>
                        <view class="privilege-item__title">服务费优惠</view>
                    </view>
                </view>

                <view class="member__box_discounts" v-if="currentPayleOrder.marketAppUserCoupons && currentPayleOrder.marketAppUserCoupons.length">
                    <view class="discounts-head flex-row-center">
                        <view class="discounts-head__title">{{ currentPayleOrder.marketAppUserCoupons.length }}张优惠券，价值{{ currentPayleOrder.allPrice }}元</view>
                    </view>

                    <view class="discounts-container flex-row-start flex_wrap">
                        <view class="container-item flex-column-start" v-for="(item, index) in currentPayleOrder.marketAppUserCoupons" :key="index">
                            <image class="container-item__bg" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/Coupons-bg.png"></image>

                            <view class="container-item__title" v-if="item.type == 1">服务费券</view>

                            <view class="container-item__title" v-if="item.type == 2">电费券</view>

                            <view class="container-item__title" v-if="item.type == 3">现金券</view>

                            <view class="container-item__price">
                                <text>￥</text>
                                {{ item.couponAmount }}
                            </view>

                            <view class="container-item__desc flex-row-center">满{{ item.meetAmount }}可用</view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="member__box">
                <view class="member__box_head flex-row-center">
                    <view class="head-lbg"></view>
                    <view class="head-title">权益说明</view>
                    <view class="head-rbg"></view>
                </view>

                <view class="member__box_explain">
                    <view>1.服务费优惠：付费会员期间，可享受服务费折扣</view>
                    <view>2.奖励金：虚拟金额，可抵扣服务费，不可提现</view>
                    <view>3.免服务费次数：可全额减免服务</view>
                    <view>4.积分：积分与成长等级会员关联，可享受成长等级会员权益</view>
                    <view>5.优惠券：可用于订单金额减免</view>
                </view>
            </view>

            <view class="member__bottom" v-if="type != 1">
                <view class="agreement flex-row-start">
                    <image
                        v-if="!isAgreement"
                        @tap="selectAgreement"
                        class="agreement__checked"
                        src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/Checkbox.png"
                    ></image>
                    <image
                        v-else
                        @tap="selectAgreement"
                        class="agreement__checked"
                        src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/Select.png"
                    ></image>
                    <view @tap="toAgreement">会员服务协议</view>
                </view>
                <view class="btn-wrap flex-row-between">
                    <view class="btn-wrap__share flex-column-start" @tap="showShare">
                        <image class="share-icon" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/share-icon.png"></image>
                        <view>分享</view>
                    </view>

                    <view class="btn-wrap__open flex-row-center" @tap="toPayPage">
                        <image class="btn-wrap__open_bg" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/btn-bg.png"></image>
                        {{ currentPayleOrder.payleRuleId == payleMemberDetail.id ? '立即续费' : '立即开通' }}
                    </view>
                </view>
            </view>

			<shareTabs :tabs='tabs' :tabsShow='tabsShow' :shareConfig='shareConfig' @tabsClose='showShare'></shareTabs>
        </view>
    </view>
</template>

<script>
import shareTabs from 'marketing_page/components/share-tabs/share-tabs';
import { getMarketingAllMemberInfo, leijiDetail } from '../../../../api/marketing/marketing';
import { getPayleMemberRuleList } from '../../../../api/marketing/payMember';
const app = getApp();
export default {
    components: {
        shareTabs
    },
    data() {
        return {
            navHeight: app.globalData.statusBarHeight + app.globalData.navBarHeight,
            isAgreement: false,
            marketingAllMemberInfo: {
                plUserAvatar: '',
                plUserName: '',
                userPmLevelName: '',
                pmLevelInvalidTime: ''
            },
            payleMemberRuleList: [],
            payleMemberDetail: {
                payLevelId: '',
                rewardIntegral: '',
                payLevelType: 0,
                rewardAmount: '',
                serveFreeTimes: '',
                payLevelServeDiscount: '',
                payLevelServeDiscountText: '',
                marketCouponOptionApplies: '',
                allCouponLength: '',
                allPrice: ''
            },
            currentPayleOrder: {
                arLevel: '',
                rewardIntegral: '',
                payLevelType: 0,
                rewardAmount: '',
                serveFreeTimes: '',
                payLevelServeDiscount: '',
                payLevelServeDiscountText: '',
                marketAppUserCoupons: '',
                allPrice: ''
            },
            current: 0,
            pmLevelStatus: false,
            tabsShow: false,
			shareConfig:{},
            tabs: ['share'],
			sharePath:'',
            type: 0,
            //是否展示会员详情
            leiji: {
                amount: ''
            }
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        // this.getMarketingAllMemberInfo()
        this.setData({
            type: options.type || 0
        });
        this.leijiDetail();
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        if (uni.getStorageSync('isPaySuccess')) {
            this.setData({
                type: 1
            });
            uni.removeStorageSync('isPaySuccess');
        }
        this.getMarketingAllMemberInfo();
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {
        this.setData({
            tabsShow: false
        });
        return {
            title: '快来开通会员叭'
        };
    },
    methods: {
		setSharePath() {
			let uid = uni.getStorageSync('memberId');
			let userInfo = uni.getStorageSync('userInfo') || {};
			this.setData({
				sharePath: `/marketing_page/pages/member/index/index`,
				shareConfig: {
					path: '/marketing_page/pages/member/index/index',
					scene: ``,
					wxPath: `marketing_page/pages/member/index/index`,
					wxTitle:`快来开通会员叭`,
					wxImage:'http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/invitation/activity.png'
				}
			});
		},
        //   获取累计优惠总值
        async leijiDetail() {
            try {
                let res = await leijiDetail({
                    type: 3
                });
                this.setData({
                    leiji: res.data
                });
                console.log(res, 'leiji');
            } catch (error) {}
        },

        showShare() {
            this.setData({
                tabsShow: !this.tabsShow
            });
        },

        swidthMemberDetaile(e) {
            const current = e.currentTarget.dataset.index;
            const { marketingAllMemberInfo, currentPayleOrder, payleMemberRuleList } = this;
            this.setData({
                current,
                payleMemberDetail: payleMemberRuleList[current] || {}
            });
        },

        //获取用户（付费会员，成长会员）信息
        getMarketingAllMemberInfo() {
            getMarketingAllMemberInfo({
                plUserId: uni.getStorageSync('memberId')
            }).then((res) => {
                console.log(res.data, '会员特权.....2222');
                const marketingAllMemberInfo = res.data || {};
                // 判断是否开通付费会员
                const pmLevelStatus = marketingAllMemberInfo.pmLevelStatus == 0;

                // 付费会员是否将要过期
                let pmLevelWillPastdue = false;
                if (marketingAllMemberInfo.pmLevelInvalidTime && marketingAllMemberInfo.pmLevelInvalidTime != -1) {
                    let day = 1000 * 60 * 60 * 24; //一天
                    if (new Date(marketingAllMemberInfo.pmLevelInvalidTime).getTime() - new Date().getTime() < day * 5) {
                        pmLevelWillPastdue = true;
                    }
                }
                marketingAllMemberInfo.pmLevelWillPastdue = pmLevelWillPastdue;

                // 当前付费会员信息
                let currentPayleOrder = marketingAllMemberInfo.currentPayleOrder || {};
                // 计算优惠券
                this.computeCouponPrice1(currentPayleOrder);

                //服务费折扣精准度
                currentPayleOrder.payLevelServeDiscountText = (((currentPayleOrder.payLevelServeDiscount || 0) * 100) / 10).toFixed(1);
                this.setData({
                    marketingAllMemberInfo,
                    current: marketingAllMemberInfo.userPmLevel - 1,
                    pmLevelStatus,
                    currentPayleOrder
                });
                this.getPayleMemberRuleList();
            });
        },

        // 查询付费会员列表
        getPayleMemberRuleList() {
            getPayleMemberRuleList().then((res) => {
                console.log(res.data, '会员特权.....');

                //服务费折扣精准度
                res.data.forEach((item) => {
                    item.payLevelServeDiscountText = (((item.payLevelServeDiscount || 0) * 100) / 10).toFixed(1);
                });
                let payleMemberRuleList = res.data || [];
                let current = this.current;
                let payleMemberDetail = {};
                // 是否开通付费会员
                if (this.pmLevelStatus) {
                    // current = payleMemberRuleList.findIndex(((item) => item.isMain == 1))
                } else {
                    current = payleMemberRuleList.findIndex((item) => item.isMain == 1);
                }
                if (current == -1) {
                    current = 0;
                }

                // 处理优惠券价格
                payleMemberRuleList.forEach((item) => {
                    this.computeCouponPrice(item);
                });
                payleMemberDetail = payleMemberRuleList[current] || {};
                this.setData({
                    payleMemberRuleList,
                    current,
                    payleMemberDetail
                });
            });
        },

        // 计算优惠券总价格
        computeCouponPrice(item) {
            item.marketCouponOptionApplies = item.marketCouponOptionApplies || [];
            item.meanPrice = (item.payLevelPrice / Math.abs(item.payLevelDuration)).toFixed(2);
            if (item.marketCouponOptionApplies) {
                item.allPrice = item.marketCouponOptionApplies.reduce((total, item) => {
                    return total + Number((item.amount * item.totalReceiveCount).toFixed(1));
                }, 0);
                item.allPrice = item.allPrice.toFixed(2);
                item.allCouponLength = item.marketCouponOptionApplies.reduce((total, item) => {
                    return total + Number(item.totalReceiveCount);
                }, 0);
            }
        },

        // 计算优惠券总价格
        computeCouponPrice1(item) {
            item.marketAppUserCoupons = item.marketAppUserCoupons || [];
            if (item.marketAppUserCoupons) {
                item.allPrice = item.marketAppUserCoupons.reduce((total, item) => {
                    return total + Number(item.couponAmount);
                }, 0);
            }
        },

        selectAgreement() {
            this.setData({
                isAgreement: !this.isAgreement
            });
        },

        toPayPage1() {
            uni.navigateTo({
                url: '/marketing_page/pages/member/index/index'
            });
        },

        toPayPage() {
            console.log(this.marketingAllMemberInfo.userPmLevel - 1, this.current);
            const { currentPayleOrder, payleMemberDetail, marketingAllMemberInfo } = this;
            // 是否开通付费会员
            if (this.pmLevelStatus) {
                // 判断是否续费操作
                if (currentPayleOrder.payleRuleId == payleMemberDetail.id) {
                    console.log(currentPayleOrder.payleRuleId == payleMemberDetail.id, '45');
                    // 续费要判断是否永久期限
                    if (marketingAllMemberInfo.pmLevelInvalidTime == -1) {
                        uni.showToast({
                            title: '你当前等级已经是永久会员了',
                            icon: 'none'
                        });
                        return;
                    }
                }
                if (marketingAllMemberInfo.userPmLevel - 1 > this.current) {
                    uni.showToast({
                        title: '不能降级购买',
                        icon: 'none'
                    });
                    return;
                }
            }
            if (!this.isAgreement) {
                return uni.showToast({
                    title: '请勾选会员服务协议',
                    icon: 'none'
                });
            }
            uni.navigateTo({
                url: '../pay_page/pay_page?data=' + encodeURIComponent(JSON.stringify(this.payleMemberDetail))
            });
        },

        toPurchaseHistory() {
            uni.navigateTo({
                url: '../purchase_history/purchase_history'
            });
        },

        toAgreement() {
            uni.navigateTo({
                url: '../agreement/agreement'
            });
        },

        onClickLeft() {
            uni.navigateBack();
        }
    }
}
</script>
<style>
	page {
	    background-color: #222426;
	    color: #fff;
	    line-height: 1;
	    padding-bottom: 300rpx;
	}
</style>
<style lang="less" scoped>
	@import "../../../../commin/flex.less";
/*颜色*/
/*文字溢出隐藏*/
/* grid是（布局 */
/* 字体大小*/
/* 圆角 */
/* 内边距 */
/* 虚边框 */
/* 数组  */
.record-in .aaa1 {
    color: #909399;
}
.record-in .aaa2 {
    color: #1487fa;
}
.record-in .aaa3 {
    color: #f7a14a;
}
.record-in .aaa4 {
    color: #72c23d;
}
.record-in .aaa5 {
    color: #606266;
}
page {
    background-color: #222426;
    color: #fff;
    line-height: 1;
    padding-bottom: 300rpx;
}
.nav__bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 282rpx;
    z-index: -1;
}
.member {
    padding: 0 24rpx;
}
.member__head {
    height: 50rpx;
    height: 300rpx;
    position: relative;
    padding: 36rpx 34rpx;
    margin: 36rpx 0;
}
.member__head_icon {
    width: 125rpx;
    height: 107rpx;
    position: absolute;
    bottom: 79rpx;
    right: 51rpx;
}
.member__head_bg {
    width: 100%;
    height: 100%;
    position: absolute;
    // z-index: -1;
    left: 0;
    top: 0;
}
.member__head .head-body{
	position: relative;
}
.member__head .head-top{
	// position: absolute;
	// left: 0;
	// top: 0;
	
}
.member__head .head-top__avatar {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    margin-right: 30rpx;
}
.member__head .head-top .body-title {
    font-size: 34rpx;
    font-weight: bold;
    color: #5b4223;
    margin-right: 16rpx;
}
.member__head .head-top .body-icon {
    position: relative;
    width: 169rpx;
    height: 43rpx;
    line-height: 43rpx;
    font-size: 20rpx;
    font-weight: bold;
    color: #ffc45f;
    padding-left: 80rpx;
    box-sizing: border-box;
}
.member__head .head-top .body-icon .icon {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.member__head .head-top .body-icon .text {
    width: 100%;
    height: 100%;
    position: absolute;
    // left: 0;
    // top: 0;
}
.member__head .head-top .body-desc {
    font-size: 24rpx;
    color: #5b4223;
    margin-top: 17rpx;
}
.member__head .head-bottom {
    margin-top: 100rpx;
}
.member__head .head-bottom__btn {
    width: 170rpx;
    height: 60rpx;
    font-size: 24rpx;
    position: relative;
    margin-bottom: 14rpx;
    margin-left: -4rpx;
    
}
.head-bottom__btn__text{
	width: 170rpx;
	height: 60rpx;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	background-image: -webkit-linear-gradient(bottom, #fad6a4, #fff4d1, #fad6a4);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.member__head .head-bottom__btn .btn-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    // z-index: -1;
}
.member__head .head-bottom__tips {
    width: 280rpx;
    font-size: 20rpx;
    color: #523d28;
    padding-top: 54rpx;
    line-height: 1.2;
}
.member__head .head-bottom__container .container-left {
    font-size: 24rpx;
    color: #5b4223;
}
.member__head .head-bottom__container .container-left .left-price {
    font-size: 28rpx;
    font-weight: bold;
}
.member__head .head-bottom__container .container-right {
    font-size: 24rpx;
    color: #6f5633;
    font-weight: bold;
    margin-right: 20rpx;
}
.member__head .head-bottom__container .container-right .arrows_r {
    width: 12rpx;
    height: 12rpx;
    border-top: 1px solid #604727;
    border-right: 1px solid #604727;
    transform: rotate(45deg);
    margin-left: 8rpx;
}
.member__box {
    background: #3a3838;
    border: 1rpx solid #bab0a1;
    border-radius: 16rpx;
    padding: 39rpx 32rpx;
    margin-bottom: 16rpx;
}
.member__box_head {
    margin-bottom: 44rpx;
}
.member__box_head .head-rbg {
    width: 68rpx;
    height: 4rpx;
    background: linear-gradient(90deg, #fad6a4 0%, rgba(250, 214, 164, 0) 100%);
    position: relative;
}
.member__box_head .head-rbg::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10rpx;
    height: 10rpx;
    background: #fad6a4;
    border-radius: 50%;
}
.member__box_head .head-lbg {
    width: 68rpx;
    height: 4rpx;
    background: linear-gradient(-90deg, #fad6a4 0%, rgba(250, 214, 164, 0) 100%);
    position: relative;
}
.member__box_head .head-lbg::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10rpx;
    height: 10rpx;
    background: #fad6a4;
    border-radius: 50%;
}
.member__box_head .head-title {
    font-size: 32rpx;
    font-weight: bold;
    background-image: -webkit-linear-gradient(bottom, #fad6a4, #fff4d1, #fad6a4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 16rpx;
}
.member__box_privilege .privilege-item {
    width: 202rpx;
    height: 192rpx;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    padding-top: 46rpx;
    margin-right: 15rpx;
    margin-bottom: 45rpx;
}
.member__box_privilege .privilege-item:nth-child(3n) {
    margin-right: 0;
}
.member__box_privilege .privilege-item__bg {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    z-index: -1;
}
.member__box_privilege .privilege-item__price {
    font-size: 30rpx;
    font-weight: bold;
    color: #f2d8a9;
    margin-bottom: 53rpx;
}
.member__box_privilege .privilege-item__title {
    font-size: 22rpx;
    color: #603c26;
}
.member__box_discounts {
    border-radius: 16rpx;
    border: 2rpx dashed #fad6a4;
    position: relative;
    margin-top: 8rpx;
}
.member__box_discounts .discounts-head {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -30rpx;
    height: 60rpx;
    background: #3a3838;
    padding: 0 40rpx;
}
.member__box_discounts .discounts-head__title {
    background-image: -webkit-linear-gradient(bottom, #fad6a4, #fff4d1, #fad6a4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    white-space: nowrap;
}
.member__box_discounts .discounts-container {
    padding: 60rpx 46rpx 0rpx;
}
.member__box_discounts .discounts-container .container-item {
    box-sizing: border-box;
    padding-top: 42rpx;
    position: relative;
    width: 139rpx;
    height: 212rpx;
    z-index: 1;
    margin-right: 62rpx;
    margin-bottom: 40rpx;
}
.member__box_discounts .discounts-container .container-item:nth-child(3n) {
    margin-right: 0;
}
.member__box_discounts .discounts-container .container-item__bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
.member__box_discounts .discounts-container .container-item__title {
    font-size: 18rpx;
    color: #603c26;
    margin-bottom: 22rpx;
}
.member__box_discounts .discounts-container .container-item__desc {
    width: 110rpx;
    height: 25rpx;
    background: rgba(96, 60, 38, 0.1);
    border-radius: 13rpx;
    font-size: 18rpx;
    color: #603c26;
}
.member__box_discounts .discounts-container .container-item__price {
    font-size: 50rpx;
    font-weight: bold;
    color: #603c26;
    margin-bottom: 28rpx;
}
.member__box_discounts .discounts-container .container-item__price text {
    font-size: 22rpx;
}
.member__box_explain {
    font-size: 24rpx;
    color: #909399;
    line-height: 36rpx;
}
.member__cards {
    white-space: nowrap;
    overflow-x: auto;
    margin-bottom: 32rpx;
}
.member__cards__item {
    display: inline-block;
    margin-right: 16rpx;
    width: 240rpx;
    background: #44392b;
    border: 1rpx solid #f7d7a0;
    border-radius: 10rpx;
    overflow: hidden;
    padding: 0 12rpx;
    box-sizing: border-box;
    position: relative;
    height: 320rpx;
}
.member__cards__item:last-child {
    margin-right: 0;
}
.member__cards__item_title {
    background: linear-gradient(-30deg, #c0965e, #efc393);
    box-shadow: 0px 2rpx 1rpx 0rpx rgba(45, 46, 47, 0.5);
    height: 62rpx;
    border-radius: 8rpx;
    font-size: 24rpx;
    color: #553219;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}
.member__cards__item_container {
    padding: 100rpx 0 20rpx 0;
    border-radius: 10rpx;
    height: 300rpx;
    box-sizing: border-box;
}
.member__cards__item_container .item-num {
    font-size: 24rpx;
    color: #c0c4cc;
    margin-bottom: 20rpx;
}
.member__cards__item_container .item-price {
    font-size: 42rpx;
    font-weight: bold;
    color: #fdc568;
    margin-bottom: 28rpx;
}
.member__cards__item_container .item-price text {
    font-size: 30rpx;
}
.member__cards__item_container .item-btn {
    width: 160rpx;
    height: 42rpx;
    background: #4d4945;
    border-radius: 21rpx;
    font-size: 20rpx;
    font-weight: 400;
    color: #ffc769;
}
.member__cards__item.on {
    background: linear-gradient(#f6e0bf, #e3b272);
    border: 1rpx solid #f7d7a0;
}
.member__cards__item.on .member__cards__item_container {
    background: linear-gradient(#fcebd3, #f4d4a8);
    border: 1rpx solid #c0965e;
    box-shadow: 0px 2rpx 4rpx 0rpx rgba(57, 55, 54, 0.26);
}
.member__cards__item.on .member__cards__item_container .item-num {
    color: #5f3c25;
}
.member__cards__item.on .member__cards__item_container .item-price {
    color: #603c26;
}
.member__bottom {
    height: 204rpx;
    background: #3d3b3a;
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    z-index: 2;
    padding: 0 32rpx;
    box-sizing: border-box;
}
.member__bottom .agreement {
    font-size: 24rpx;
    color: #ffffff;
    height: 84rpx;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.member__bottom .agreement__checked {
    width: 27rpx;
    height: 27rpx;
    margin-right: 20rpx;
}
.member__bottom .btn-wrap {
    padding-top: 20rpx;
}
.member__bottom .btn-wrap__share {
    font-size: 24rpx;
    color: #c0c4cc;
}
.member__bottom .btn-wrap .share-icon {
    width: 34rpx;
    height: 31rpx;
    margin-bottom: 14rpx;
}
.member__bottom .btn-wrap__open {
    width: 592rpx;
    height: 88rpx;
    position: relative;
    font-weight: bold;
    font-size: 34rpx;
    background-image: -webkit-linear-gradient(bottom, #fad6a4, #fff4d1, #fad6a4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.member__bottom .btn-wrap__open_bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
</style>
